<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>条件渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-show -->
        <h2 v-show="false">{{ slogan }}</h2>
        <h2 v-show="1 === 1">{{ slogan }}</h2>

        <!-- v-if -->
        <h2 v-if="false">{{ slogan }}</h2>
        <h2 v-if="1 === 1">{{ slogan }}</h2>

        <button @click="n += 1">当前 n 的值是：{{ n }}</button>

        <div v-if="n === 1">Angular</div>
        <div v-else-if="n === 1">React</div>
        <div v-else-if="n === 1">Vue</div>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                slogan: '天上的星星笑地上的人',
                n: 0
            }
        })
    </script>
</body>
</html>